<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<title>生命体征检测云平台</title>
		<link rel="shortcut icon" href="static/logo.ico" />
		<link rel="stylesheet" href="static/css/index.css" />
		<link rel="stylesheet" href="static/layui/css/layui.css" />
		<script type="text/javascript" src="static/js/jquery.min.js"></script>
		<script type="text/javascript" src="static/layui/layui.js"></script>
		<script type="text/javascript" src="static/echarts5.4.0/echarts.js"></script>
		<script type="text/javascript" src="static/js/vue.js"></script>
		<script type="text/javascript" src="static/js/axios.min.js"></script>
		<script type="text/javascript" src="static/js/config.js"></script>
		<style>
			html,
			body,
			#container {
				height: 100%;
				width: 100%;
				margin: 0;
				background-color: #efefef;
			}

			.collision-btn.disable {
				background-image: none;
				color: lightgrey;
				border-color: lightgrey;
				cursor: not-allowed;
			}

			.collision-btn.disable:hover {
				background-color: #fff;
				border-color: lightgrey;
			}

			.input-card .btn {
				margin-right: .8rem;
			}

			.amap-marker {
				opacity: 0.01;
			}

			.nav-right {
				top: 1.5rem !important;
			}

			.container {
				width: 100%;
				height: 100%;
			}

			.show-grid {
				padding: 20px;
				box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.2);
			}

			.show-icon-img {
				width: 60px;
				height: 60px;
			}

			.grid-text {
				font-size: 48px;
				font-weight: 800;
			}

			.text-red,
			.line-red,
			.lines-red {
				color: #c11508;
			}

			.text-green,
			.line-green,
			.lines-green {
				color: #39b54a;
			}

			.grid-xt-color,
			.line-xt {
				color: #ec2a65;
			}

			.grid-hx-color,
			.line-hx {
				color: #37aaff;
			}

			.grid-mx-color,
			.line-mx {
				color: #e5b828;
			}

			.grid-td-color,
			.line-td {
				color: #7b49e6;
			}

			.grid-demo {
				margin: 1rem;
				padding: 20px;
				line-height: 60px;
				text-align: center;
				background-color: #ffffff;
				color: #000000;
				border-radius: 10px;
			}

			.grid-nav {
				margin: 1rem;
				padding: 5px;
				padding-left: 81px;
				line-height: 60px;
				text-align: left;
				background-color: #ffffff;
				color: #000000;
				border-radius: 10px;
				font-size: 22px;
			}

			.grid-tag {
				font-size: 12px;
				vertical-align: middle;
				position: relative;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				padding: 0px 8px;
				height: 25px;
				font-family: Helvetica Neue, Helvetica, sans-serif;
				white-space: nowrap;
			}

			.grid-tag[class*="line-"]::after {
				content: " ";
				width: 200%;
				height: 200%;
				position: absolute;
				top: 0;
				left: 0;
				border: 1px solid currentColor;
				-webkit-transform: scale(0.5);
				transform: scale(0.5);
				-webkit-transform-origin: 0 0;
				transform-origin: 0 0;
				box-sizing: border-box;
				border-radius: inherit;
				z-index: 1;
				pointer-events: none;
			}

			.grid-demo-bg1 {
				background-color: #63BA79;
			}

			.layui-col-md3 {
				height: 60px;
			}

			.layui-tab-title {
				background-color: #fff;
			}

			.animation-grid {
				width: 98.5%;
				height: auto;
				/* position: absolute; */
				background-color: #ffffff;
				/* top: 38%; */
				/* margin-top: 90px; */
				/* padding: 20px; */
				margin: 15px;
				margin-top: 93px;
				border-radius: 10px;
			}
			}

			.layui-tab-title {
				background-color: #fff;
			}

			.layui-layer-btn .layui-layer-btn0 {
				border-color: #063683;
				background-color: #063683;
				color: #fff;
				margin-right: 37%;
			}

			.layui-layer {
				border-radius: 10px;
			}

			.layui-layer-title {
				border: 0;
				text-align: center;
				padding: 0 20px 0 20px;
			}
		</style>
		<script>
			$(function() {
				$(".sign_out").click(function() {
					localStorage.clear();
					window.location = 'login.html'
				});
				$('.userinfo').hover(function() {});
				$('.userinfo').hover(function() {});


			})

			function showtap(tapval, idname) {
				console.log(tapval)
				console.log(idname)
				var title = '';
				var content = '';
				var id = '';
				if (idname == "xueyang") {
					title = '血氧数据';
					content = xueyangtext;
				} else if (idname == "xinlv") {
					title = '血氧数据';
					content = xueyangtext;
				} else if (idname == "huxilv") {
					title = '血氧数据';
					content = xueyangtext;
				} else if (idname == "maixiang") {
					title = '血氧数据';
					content = xueyangtext;
				} else if (idname == "ganzhijuli") {
					title = '血氧数据';
					content = xueyangtext;
				} else if (idname == "lichuangbaojin") {
					title = '血氧数据';
					content = xueyangtext;
				} else if (idname == "wendu") {
					title = '血氧数据';
					content = xueyangtext;
				} else if (idname == "shidu") {
					title = '血氧数据';
					content = xueyangtext;
				} else if (idname == "qiya") {
					title = '血氧数据';
					content = xueyangtext;
				} else if (idname == "co2") {
					title = '血氧数据';
					content = xueyangtext;
				} else if (idname == "tvoc") {
					title = '血氧数据';
					content = xueyangtext;
				} else {

				}
				// $('#'+id).mouseover(function() {
					layer.open({
						type: 1,
						title: title,
						shade: 0,
						shadeClose: false,
						area: ['260px', '206px'],
						closeBtn: 0, //不显示关闭按钮
						btn: ['确定'],
						anim: 2,
						id: 'LAY_layuixueyang',
						content: '<div  style="padding: 10px;">' + content + '</div>'
					});
				// });
			}
		</script>
	</head>
	<body>
		<div id="app">
			<input id="equname" type="hidden" value="" />
			<input id="tapval" type="hidden" value="" />
			<div style="background-color: #e5e5e5; height: 59px;"></div>
			<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
				<ul class="layui-tab-title">
					<!-- <li class="layui-this">按时筛选</li> -->
					<li class="layui-this">按日筛选</li>
					<li>按月筛选</li>
					<li>按年筛选</li>
					<!-- <li>按年筛选</li> -->
				</ul>
				<div class="layui-tab-content">
					<div class="layui-tab-item layui-show">
						<div class="container" style="">
							<blockquote class="layui-elem-quote" style="height: 62px;">
								<span style="font-size: 20px ;font-weight: 800;float: left;">按日筛选</span>
								<div class="layui-form" style="float: left;margin-left: 40px;">
									<div class="layui-form-item">
										<div class="layui-inline">
											<label class="layui-form-label"
												style="font-size: 14px; width: 100px;line-height: 25px;padding: 9px 0 15px 9px;">筛选类型:</label>
											<div class="layui-input-block">
												<!-- <select name="interest" id="datatype">
														<option value="">请选择类型</option>
														<option value="1" selected="">指检查记录</option>
														<option value="2">连续监测记录</option>
													</select>
													 -->
												<input type="radio" name="datatype" value="1" title="指检查记录">
												<input type="radio" name="datatype" value="2" title="连续监测记录">
											</div>
										</div>
										<div class="layui-inline">
											<label class="layui-form-label"
												style="font-size: 12px; width: 100px;">日期条件:</label>
											<div class="layui-inline" id="sotime">
												<div class="layui-input-inline">
													<input type="text" autocomplete="off" class="layui-input"
														placeholder="选择日期" id="date1">
												</div>
											</div>
										</div>
									</div>
								</div>

								<a class="layui-btn layui-btn-normal" href="#"
									style="float: left;height: 30px;line-height: 26px !important;"
									v-on:click="searchs(1)">筛选</a>

							</blockquote>
							<div class="grid-nav show-grid"
								style=" padding-left:30px;padding-right: 20px;padding-bottom: 0px;margin-bottom: 0px;border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 0;border-bottom-left-radius: 0;">
								<table class="layui-table">
									<thead>
										<tr>
											<th style="width: 10%;">日期</th>
											<th style="width: 8%;">血氧<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="xueyang1" οnmοuseοver="showtap(1,xueyang)"></i></th>
											<th style="width: 8%;">心率<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="xinlv1"></i></th>
											<th style="width: 8%;">呼吸率<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="huxilv1"></i></th>
											<th style="width: 8%;">脉象<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="maixiang1"></i>
											</th>
											<th style="width: 8%;">感知距离<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="ganzhijuli1"></i>
											</th>
											<th style="width: 8%;">离床报警<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;"
													id="lichuangbaojin1"></i></th>
											<th style="width: 8%;">温度<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="wendu1"></i></th>
											<th style="width: 8%;">湿度<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="shidu1"></i></th>
											<th style="width: 8%;">气压<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="qiya1"></i></th>
											<th style="width: 8%;">CO2<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="co21"></i></th>
											<th style="width: 8%;">TVOC<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="tvoc1"></i></th>
										</tr>
								</table>
							</div>
							<div class="grid-nav show-grid"
								style="margin-top: -10px; padding-left:30px;padding-right: 20px;padding-top: 0px; overflow-y:auto; overflow-x:hidden; width:98.6%; height:460px;border-top-left-radius: 0;border-top-right-radius: 0px;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;">
								<table class="layui-table" style="margin: -1px;">
									<thead>
										<tr v-for="item in loglist" :key="item.id">
											<th style="width: 10%;">{{item.starttime}}</th>
											<th style="width: 8%;">{{item.avgspo2}}%</th>
											<th style="width: 8%;">{{item.avgrtHeartRate}}</th>
											<th style="width: 8%;">{{item.avgrtBreath}}</th>
											<th style="width: 8%;">{{item.avgmai}}</th>
											<th style="width: 8%;">{{item.avgrrange}}CM</th>
											<th style="width: 8%;">未离床</th>
											<th style="width: 8%;">{{item.avgtemp}}℃</th>
											<th style="width: 8%;">{{item.avghumidity}}%</th>
											<th style="width: 8%;">{{item.avgpressure}}kPa</th>
											<th style="width: 8%;">{{item.avgco2}}PPM</th>
											<th style="width: 8%;">{{item.avgtvoc}}</th>
										</tr>
									</thead>
								</table>
							</div>
						</div>

					</div>
					<div class="layui-tab-item">
						<div class="container" style="">
							<blockquote class="layui-elem-quote" style="height: 62px;">
								<span style="font-size: 20px ;font-weight: 800;float: left;">按月筛选</span>
								<div class="layui-form" style="float: left;margin-left: 40px;">
									<div class="layui-form-item">
										<div class="layui-inline">
											<label class="layui-form-label"
												style="font-size: 14px; width: 100px;line-height: 25px;padding: 9px 0 15px 9px;">筛选类型:</label>
											<div class="layui-input-block">
												<!-- <select name="interest" id="datatype">
														<option value="">请选择类型</option>
														<option value="1" selected="">指检查记录</option>
														<option value="2">连续监测记录</option>
													</select>
													 -->
												<input type="radio" name="datatype" value="1" title="指检查记录" checked="">
												<input type="radio" name="datatype" value="2" title="连续监测记录">
											</div>
										</div>
										<div class="layui-inline">
											<label class="layui-form-label"
												style="font-size: 12px; width: 100px;">日期条件:</label>
											<div class="layui-inline" id="sotime">
												<div class="layui-input-inline">
													<input type="text" autocomplete="off" class="layui-input"
														placeholder="选择日期" id="date2">
												</div>
											</div>
										</div>
									</div>
								</div>

								<a class="layui-btn layui-btn-normal" href="#"
									style="float: left;height: 30px;line-height: 26px !important;"
									v-on:click="searchs(2)">筛选</a>

							</blockquote>
							<div class="grid-nav show-grid"
								style="padding-left:20px;padding-right: 20px;padding-bottom: 0px;margin-bottom: 0px;border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 0;border-bottom-left-radius: 0;">
								<table class="layui-table" style="width: 99%;">
									<thead>
										<tr>
											<th style="width: 10%;">日期</th>
											<th style="width: 8%;">血氧<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="xueyang2"
													οnmοuseοver="showtap(1,xueyang)"></i></th>
											<th style="width: 8%;">心率<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="xinlv2"></i></th>
											<th style="width: 8%;">呼吸率<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="huxilv2"></i></th>
											<th style="width: 8%;">脉象<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="maixiang2"></i>
											</th>
											<th style="width: 8%;">感知距离<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="ganzhijuli2"></i>
											</th>
											<th style="width: 8%;">离床报警<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;"
													id="lichuangbaojin2"></i></th>
											<th style="width: 8%;">温度<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="wendu2"></i></th>
											<th style="width: 8%;">湿度<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="shidu2"></i></th>
											<th style="width: 8%;">气压<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="qiya2"></i></th>
											<th style="width: 8%;">CO2<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="co22"></i></th>
											<th style="width: 8%;">TVOC<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="tvoc2"></i></th>
										</tr>
								</table>
							</div>
							<div class="grid-nav show-grid"
								style="margin-top: -10px; padding-left:20px;padding-right: 20px;padding-top: 0px; overflow-y:auto; overflow-x:hidden; width:98.6%; height:460px;border-top-left-radius: 0;border-top-right-radius: 10px;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;">
								<table class="layui-table" style="margin: -1px;">
									<thead>
										<tr v-for="item in loglist" :key="item.id">
											<th style="width: 10%;">{{item.starttime}}</th>
											<th style="width: 8%;">{{item.avgspo2}}%</th>
											<th style="width: 8%;">{{item.avgrtHeartRate}}</th>
											<th style="width: 8%;">{{item.avgrtBreath}}</th>
											<th style="width: 8%;">{{item.avgmai}}</th>
											<th style="width: 8%;">{{item.avgrrange}}CM</th>
											<th style="width: 8%;">未离床</th>
											<th style="width: 8%;">{{item.avgtemp}}℃</th>
											<th style="width: 8%;">{{item.avghumidity}}%</th>
											<th style="width: 8%;">{{item.avgpressure}}kPa</th>
											<th style="width: 8%;">{{item.avgco2}}PPM</th>
											<th style="width: 8%;">{{item.avgtvoc}}</th>
										</tr>
									</thead>
								</table>
							</div>
						</div>

					</div>
					<div class="layui-tab-item">
						<div class="container" style="">
							<blockquote class="layui-elem-quote" style="height: 62px;">
								<span style="font-size: 20px ;font-weight: 800;float: left;">按年筛选</span>
								<div class="layui-form" style="float: left;margin-left: 40px;">
									<div class="layui-form-item">
										<div class="layui-inline">
											<label class="layui-form-label"
												style="font-size: 14px; width: 100px;line-height: 25px;padding: 9px 0 15px 9px;">筛选类型:</label>
											<div class="layui-input-block">
												<!-- <select name="interest" id="datatype">
														<option value="">请选择类型</option>
														<option value="1" selected="">指检查记录</option>
														<option value="2">连续监测记录</option>
													</select>
													 -->
												<input type="radio" name="datatype" value="1" title="指检查记录" checked="">
												<input type="radio" name="datatype" value="2" title="连续监测记录">
											</div>
										</div>
										<div class="layui-inline">
											<label class="layui-form-label"
												style="font-size: 12px; width: 100px;">日期条件:</label>
											<div class="layui-inline" id="sotime">
												<div class="layui-input-inline">
													<input type="text" autocomplete="off" class="layui-input"
														placeholder="选择日期" id="date3">
												</div>
											</div>
										</div>
									</div>
								</div>

								<a class="layui-btn layui-btn-normal" href="#"
									style="float: left;height: 30px;line-height: 26px !important;"
									v-on:click="searchs(3)">筛选</a>

							</blockquote>
							<div class="grid-nav show-grid"
								style="padding-left:20px;padding-right: 20px;padding-bottom: 0px;margin-bottom: 0px;border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 0;border-bottom-left-radius: 0;">
								<table class="layui-table" style="width: 99%;">
									<thead>
										<tr>
											<th style="width: 10%;">日期</th>
											<th style="width: 8%;">血氧<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="xueyang3"></i></th>
											<th style="width: 8%;">心率<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="xinlv3"></i></th>
											<th style="width: 8%;">呼吸率<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="huxilv3"></i></th>
											<th style="width: 8%;">脉象<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="maixiang3"></i>
											</th>
											<th style="width: 8%;">感知距离<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="ganzhijuli3"></i>
											</th>
											<th style="width: 8%;">离床报警<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;"
													id="lichuangbaojin3"></i></th>
											<th style="width: 8%;">温度<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="wendu3"></i></th>
											<th style="width: 8%;">湿度<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="shidu3"></i></th>
											<th style="width: 8%;">气压<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="qiya3"></i></th>
											<th style="width: 8%;">CO2<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="co23"></i></th>
											<th style="width: 8%;">TVOC<i class="layui-icon layui-icon-tips"
													style="margin-left: 5px; line-height: 30px;" id="tvoc3"></i></th>
										</tr>
								</table>
							</div>
							<div class="grid-nav show-grid"
								style="margin-top: -10px; padding-left:20px;padding-right: 20px;padding-top: 0px; overflow-y:auto; overflow-x:hidden; width:98.6%; height:460px;border-top-left-radius: 0;border-top-right-radius: 10px;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;">
								<table class="layui-table" style="margin: -1px;">
									<thead>
										<tr v-for="item in loglist" :key="item.id">
											<th style="width: 10%;">{{item.starttime}}</th>
											<th style="width: 8%;">{{item.avgspo2}}%</th>
											<th style="width: 8%;">{{item.avgrtHeartRate}}</th>
											<th style="width: 8%;">{{item.avgrtBreath}}</th>
											<th style="width: 8%;">{{item.avgmai}}</th>
											<th style="width: 8%;">{{item.avgrrange}}CM</th>
											<th style="width: 8%;">未离床</th>
											<th style="width: 8%;">{{item.avgtemp}}℃</th>
											<th style="width: 8%;">{{item.avghumidity}}%</th>
											<th style="width: 8%;">{{item.avgpressure}}kPa</th>
											<th style="width: 8%;">{{item.avgco2}}PPM</th>
											<th style="width: 8%;">{{item.avgtvoc}}</th>
										</tr>
									</thead>
								</table>
							</div>
						</div>

					</div>
				</div>
			</div>
			<div class="animation-grid" style="margin-top: 0;">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 0;">
					<legend></legend>
				</fieldset>
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
					<legend>血氧记录 <span style="color: #63BA79; font-size: 14px;">(次/每分钟)</span></legend>
				</fieldset>
				<div class="layui-row">
					<div class="layui-col-md12">
						<div id="main0" style="width:100%;height:260px;"></div>
					</div>
					<div class="layui-col-md12" style="text-align: center;">
						<div class="layui-row" style="text-align: center;">
							<div class="layui-col-md3"> 平均值：80%</div>
							<div class="layui-col-md3"> 范围:80 ~ 100</div>
						</div>
					</div>
				</div>
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
					<legend>心跳记录<span style="color: #63BA79; font-size: 14px;">(次/每分钟)</span></legend>
				</fieldset>
				<div class="layui-row">
					<div class="layui-col-md12">
						<div id="main" style="width:100%;height:260px;"></div>
					</div>
					<div class="layui-col-md12" style="text-align: center;">
						<div class="layui-row" style="text-align: center;">
							<div class="layui-col-md3"> 平均值：80次/每分钟</div>
							<div class="layui-col-md3"> 范围:65 ~ 110</div>
						</div>
					</div>

				</div>
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
					<legend>呼吸记录 <span style="color: #63BA79; font-size: 14px;">(次/每分钟)</span></legend>
				</fieldset>
				<div class="layui-row">
					<div class="layui-col-md12">
						<div id="main2" style="width:100%;height:260px;"></div>
					</div>
					<div class="layui-col-md12" style="text-align: center;">
						<div class="layui-row" style="text-align: center;">
							<div class="layui-col-md3"> 平均值：12次/每分钟</div>
							<div class="layui-col-md3"> 范围:12 ~ 20</div>
						</div>
					</div>
				</div>
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
					<legend>脉象记录 <span style="color: #63BA79; font-size: 14px;">(次/每分钟)</span></legend>
				</fieldset>
				<div class="layui-row">
					<div class="layui-col-md12">
						<div id="main3" style="width:100%;height:260px;"></div>
					</div>
					<div class="layui-col-md12" style="text-align: center;">
						<div class="layui-row" style="text-align: center;">
							<div class="layui-col-md3"> 平均值：<span style="color: #ba0003;">一息五至</span>（5.5）</div>
							<div class="layui-col-md3"> 范围:<span style="color: #000;">一息三至</span>（3.5） ~ <span
									style="color: #000;">一息七至</span>（7.0）</div>
						</div>
					</div>
				</div>
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
					<legend>体动记录 <span style="color: #63BA79; font-size: 14px;">(次/每分钟)</span></legend>
				</fieldset>
				<div class="layui-row">
					<div class="layui-col-md12">
						<div id="main4" style="width:100%;height:260px;"></div>
					</div>
					<div class="layui-col-md12" style="text-align: center;">
						<div class="layui-row" style="text-align: center;">
							<div class="layui-col-md3"> 平均值：80CM</div>
							<div class="layui-col-md3"> 范围:50 ~ 80</div>
						</div>
					</div>
				</div>
			</div>


			<div class="info">
				<div class="nav-left">
					<a class="login"></a>
					<a class="hometext" href="index.html" v-if="uInfoData.loginType !=1">首页</a>
					<a class="hometext" href="home.html" v-if="uInfoData.loginType == 1">首页</a>
				</div>
				<div class="nav-right">
					<ul>
						<li><a href="monitoring.html" v-if="uInfoData.loginType !=1">监测</a></li>
						<li><a href="historical_data.html" v-if="uInfoData.loginType !=1">历史数据</a></li>
						<li><a href="historical_info.html" v-if="uInfoData.loginType == 1">历史数据</a></li>
						<li><a href="call_p.html">离床报警</a></li>
						<li><a href="#">康养中心</a></li>
						<li><a href="#">中医问诊</a></li>
					</ul>
				</div>
				<div class="userinfo" id="userinfo">
					<img src="static/image/user.png" />
					<!-- <div class="red-dot"></div> -->
					<ul class="user_dropdown">
						<li class="dropdown_item user_ctrl">
							<div class="nickname">{{uInfoData.userName}}</div>
							<div class="sign_out">退出</div>
						</li>
						<li class="dropdown_item msg_item">
							<a href="user.html" target="_blank">
								<span>个人中心</span>
							</a>
						</li>
						<li class="dropdown_item msg_item">
							<a href="my_message.html" target="_blank">
								<span>我的消息</span>
								<span class="msg_unread unread_count show">0-</span>
							</a>
						</li>
						<li class="dropdown_item">
							<a href="equipment.html">
								<span>设备</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		</div>


		</div>
		<script>
			var vm = new Vue({
				el: '#app', //设置当前vue对象可以操作数据的范围,注意不要把vue对象绑定到body中，因为这样，vue需要控制整个页面的内容，效率太低了
				data: {
					uInfoData: [],
					equName: '',
					loglist: []
				},
				mounted() {},
				ready: function() {
					// this.getdata();
				},
				created: function() {
					this.getdata();
					this.layuint();
				},
				methods: {
					getdata: function() {
						var rloginName = localStorage.loginName;
						console.log(rloginName)
						if (rloginName == '' || rloginName == 'null' || rloginName == undefined) {
							layer.msg('登录过期或者无权访问！', {
								time: 1000,
								end: function() {
									location.href = 'login.html'
								}
							})
						} else {
							axios({
									method: 'GET',
									url: url + "/user/userInfo/lquserOwnInfo?phoneNum=" + rloginName,
									data: {}
								})
								.then(function(response) {
									vm.uInfoData = response.data;
									var equName = response.data.userEquipmentList[0].equName;
									$('#equname').val(equName);
								})
							let data = new FormData();
							data.append('equId', '07');
							data.append('typeofMm', '20230321');
							data.append('dataType', '1');
							data.append('queryType', '1');
							axios({
									method: 'post',
									url: url + "/history/equQueryHistoryData",
									data: data
								})
								.then(function(response) {
									vm.loglist = response.data;

									ecint();
								})
						}
					},
					layuint: function() {

						layui.use(['form', 'table', 'layedit', 'laydate', 'dropdown', 'element', 'layer'],
							function() {
								var form = layui.form,
									table = layui.table,
									layer = layui.layer,
									layedit = layui.layedit,
									laydate = layui.laydate,
									dropdown = layui.dropdown,
									element = layui.element,
									layer = layui.layer;
								forms = layui.form;
								let data = new FormData();
								data.append('equId', '07');
								data.append('typeofMm', '20230321');
								data.append('dataType', '1');
								data.append('queryType', '1');

								laydate.render({
									elem: '#date1',
									format: 'yyyyMMdd'
								});
								laydate.render({
									elem: '#date2',
									format: 'yyyyMM'
								});
								laydate.render({
									elem: '#date3',
									format: 'yyyy'
								});
								element.on('tab(docDemoTabBrief)', function(data) {
									$('#tapval').val(data.index);
									console.log('切到到了' + data.index + '：' + this.innerHTML);
								});
							});
					},
					searchs: function(tapval) {
						var dates;
						var equnames2 = $('#equname').val();
						var datatypes = $('input[name="datatype"]:checked').val(); //$('#datatype').val();
						var equnames = localStorage.equName;
						if (tapval == 1) {
							dates = $('#date1').val();
						}
						if (tapval == 2) {
							dates = $('#date2').val();
						}
						if (tapval == 3) {
							dates = $('#date3').val();
						}
						$.ajax({
							type: 'POST',
							url: url + '/history/equQueryHistoryData',
							async: false,
							data: {
								equId: equnames,
								typeofMm: dates,
								dataType: datatypes,
								queryType: tapval
							},
							success: function(res) {
								vm.loglist = res;
								ecint();
							}
						});
					},
					ecsetdata: function() {

						// var a=now.getHours()+':'+now.getMinutes()+':'+ (now.getSeconds()+1);getSeconds();
						// console.log(a)

					}
				}
			})

			function ecint() {
				var chartDom0 = document.getElementById('main0');
				var myChart0 = echarts.init(chartDom0);
				var chartDom = document.getElementById('main');
				var myChart = echarts.init(chartDom);
				var chartDom2 = document.getElementById('main2');
				var myChart2 = echarts.init(chartDom2);
				var chartDom3 = document.getElementById('main3');
				var myChart3 = echarts.init(chartDom3);
				var chartDom4 = document.getElementById('main4');
				var myChart4 = echarts.init(chartDom4);
				var option;
				var datas = vm.$data.loglist;


				function randomData(times, val) {
					var now = new Date(times);
					var value = val;
					return {
						name: now.toString(),
						value: [times, value]
					};
				}
				let data0 = [];
				let data = [];
				let data2 = [];
				let data3 = [];
				let data4 = [];
				let now = new Date();
				for (var a in datas) {
					var starttime = datas[a]['starttime'];
					var avgspo2 = datas[a]['avgspo2']; //血氧
					var avgrtHeartRate = datas[a]['avgrtHeartRate']; //心跳
					var avgrtBreath = datas[a]['avgrtBreath']; //呼吸
					var avgmai = datas[a]['avgmai']; //脉搏
					var avgrrange = datas[a]['avgrrange']; //体动
					data0.push(randomData(starttime, avgspo2));
					data.push(randomData(starttime, avgrtHeartRate));
					data2.push(randomData(starttime, avgrtBreath));
					data3.push(randomData(starttime, avgmai));
					data4.push(randomData(starttime, avgrrange));
				}
				option0 = {
					color: ["#00ffff"],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							animation: false
						}
					},
					xAxis: {
						type: 'time',
						splitLine: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%'],
						axisLine: {
							symbol: 'arrow',
							lineStyle: {
								type: 'dashed',
							}
						},
						splitLine: {
							show: false
						}
					},
					series: [{
						name: '',
						type: 'line',
						showSymbol: false,
						data: data0
					}]
				};
				option = {
					color: ["#ec2a65"],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							animation: false
						}
					},
					xAxis: {
						type: 'time',
						splitLine: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%'],
						axisLine: {
							symbol: 'arrow',
							lineStyle: {
								type: 'dashed',
							}
						},
						splitLine: {
							show: false
						}
					},
					series: [{
						name: '',
						type: 'line',
						showSymbol: false,
						data: data
					}]
				};
				option2 = {
					color: ["#37aaff"],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							animation: false
						}
					},
					xAxis: {
						type: 'time',
						splitLine: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%'],
						axisLine: {
							symbol: 'arrow',
							lineStyle: {
								type: 'dashed',
							}
						},
						splitLine: {
							show: false
						}
					},
					series: [{
						name: '',
						type: 'line',
						showSymbol: false,
						data: data2
					}]
				};
				option3 = {
					color: ["#e5b828"],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							animation: false
						}
					},
					xAxis: {
						type: 'time',
						splitLine: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%'],
						axisLine: {
							symbol: 'arrow',
							lineStyle: {
								type: 'dashed',
							}
						},
						splitLine: {
							show: false
						}
					},
					series: [{
						name: '',
						type: 'line',
						showSymbol: false,
						data: data3
					}]
				};
				option4 = {
					color: ["#7b49e6"],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							animation: false
						}
					},
					xAxis: {
						type: 'time',
						splitLine: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%'],
						axisLine: {
							symbol: 'arrow',
							lineStyle: {
								type: 'dashed',
							}
						},
						splitLine: {
							show: false
						}
					},
					series: [{
						name: '',
						type: 'line',
						showSymbol: false,
						data: data4
					}]
				};
				myChart.setOption({
					series: [{
						data: data
					}]
				});

				option && myChart0.setOption(option0);
				option && myChart.setOption(option);
				option && myChart2.setOption(option2);
				option && myChart3.setOption(option3);
				option && myChart4.setOption(option4);

			}
		</script>
	</body>
</html>
